import { Logo, Zoom, GeoLocate, MouseLocation, Fullscreen, MapTheme } from "@antv/l7"

export const useControl = (scene, map) => {
  const sceneControl = {}
  sceneControl['logo'] = new Logo({
    img: "https://img.gejiba.com/images/dfdb6db1623eb881e724f58d9a366af8.png",
    herf: "https://www.x-zd.com/",
    position: "leftbottom"
  })
  sceneControl['zoom'] = new Zoom({
    position: "topleft"
  })
  sceneControl['geolocation'] = new GeoLocate({
    position: "topleft"
  })
  sceneControl['mouselocation'] = new MouseLocation({
    position: "bottomright"
  })
  sceneControl['fullscreen'] = new Fullscreen({
    position: "topright"
  })
  sceneControl['maptheme'] = new MapTheme({
    options: [
      {
        text: 'satellite-v9',
        value: 'mapbox://styles/mapbox/satellite-v9',
        img: '../../src/assets/images/satellite.png'
      },
      {
        text: 'satellite-streets-v12',
        value: 'mapbox://styles/mapbox/satellite-streets-v12',
        img: '../../src/assets/images/satellite-streets.png'
      },
      {
        text: 'navigation-day-v1',
        value: 'mapbox://styles/mapbox/navigation-day-v1',
        img: '../../src/assets/images/navigation-day.png'
      },
      {
        text: 'navigation-night-v1',
        value: 'mapbox://styles/mapbox/navigation-night-v1',
        img: '../../src/assets/images/navigation-night.png'
      },
      {
        text: 'streets-v12',
        value: 'mapbox://styles/mapbox/streets-v12',
        img: '../../src/assets/images/streets-v12.png'
      },
      {
        text: 'outdoors-v12',
        value: 'mapbox://styles/mapbox/outdoors-v12',
        img: '../../src/assets/images/outdoors-v12.png'
      },
      {
        text: 'light-v11',
        value: 'mapbox://styles/mapbox/light-v11',
        img: '../../src/assets/images/light-v11.png'
      },
      {
        text: 'dark-v11',
        value: 'mapbox://styles/mapbox/dark-v11',
        img: '../../src/assets/images/dark-v11.png'
      },
    ]
  })
  scene.on('loaded', () => {
    for(const key in sceneControl) {
      scene.addControl(sceneControl[key])
    }
  })
  const directions = new MapboxDirections({
    accessToken: import.meta.env.VITE_TOKEN,
    unit: 'metric',
    language: 'zh-Hans'
  })
   let ori, des;
   const token = import.meta.env.VITE_TOKEN
  directions.on("origin", (e) => {
    ori = e.feature.geometry.coordinates;
    console.log(e.feature.geometry.coordinates, "起点");
  });
  directions.on("destination", (e) => {
    des = e.feature.geometry.coordinates
    console.log(e, "终点")
    fetch(
      `https://api.mapbox.com/directions/v5/mapbox/driving/${[ori, des].join(
        ";"
      )}?geometries=geojson&access_token=${token}`
    )
      .then((res) => res.json())
      .then((data) => {
        console.log(data, "导航数据")
      })
  })
  let flag = true
  function switchDirections() {
    flag ? map.addControl(directions, 'top-left') : map.removeControl(directions)
    flag = !flag
  }
  map.on('style.load', () => {
    switchDirections()
  })
  return {
    directions,
    switchDirections
  }
}